<template>
  <div class="app-container">
    <el-form v-enterToNext="true" ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="80px" size="100%" status-icon >
      <el-form-item label="商品" prop="GoodName">
        <el-select v-model="postForm.GoodName" filterable clearable placeholder="请选择" size="800px">
          <el-option
            v-for="item in goods"
            :key="item.ID"
            :label="item.No"
            :value="item.ID"/>
        </el-select>
      </el-form-item>
      <el-form-item label="单位" prop="Unit">
        <el-select v-model="postForm.Unit" filterable clearable placeholder="请选择" size="800px">
          <el-option
            v-for="item in units"
            :key="item.ID"
            :label="item.Name"
            :value="item.ID"/>
        </el-select>
      </el-form-item>
      <el-form-item label="数量" prop="Quantity">
        <el-input-number v-model="postForm.Quantity" :min="1" size="800px"/>
      </el-form-item>
      <el-form-item>
        <el-button :loading="loading" type="primary" size="medium" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getCommodities } from '@/api/commodity'
import { delivery } from '@/api/order'

export default {
  data() {
    return {
      loading: false,
      units: [
        { ID: '个', Name: '个' },
        { ID: '箱', Name: '箱' }
      ],
      goods: [],
      rules: {
        GoodName: [
          { required: true, message: '请选择出库商品', trigger: 'blur' }
        ]
      },
      postForm: {
        GoodName: '',
        Unit: '个',
        Quantity: '1',
        UserName: ''
      }
    }
  },
  created() {
    this.fetchData()
  },

  methods: {
    fetchData() {
      getCommodities().then(response => {
        console.log(response)
        this.goods = response.map(item => {
          return {
            Quantity: 1,
            ID: item.ID,
            No: item.No,
            Name: item.Name
          }
        })
      })
    },

    submitForm() {
      this.postForm.UserName = this.$route.query.user
      console.log(this.postForm)
      this.loading = true
      this.$refs.postForm.validate(valid => {
        if (valid) {
          delivery(this.postForm).then(response => {
            console.log(response)
            this.loading = false
            this.$message.success('创建成功')
          }).catch((error) => {
            this.loading = false
            if (error && error.response && error.response.data && error.response.data.error) {
              this.$message.error(error.response.data.error)
            } else {
              this.$message.error('创建失败')
            }
          })
        } else {
          this.loading = false
        }
      })
    }

  }
}
</script>

<style scoped>

</style>
<style lang="scss">
  .el-scrollbar {
    > .el-scrollbar__bar {
      opacity: 1 !important;
    }
  }
</style>

